<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>养护管理</title>
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/style.css" />
	<link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css" />
	<style>
		html,
		body {
			background-color: #F5F6F6;
		}

		ul {
			position: relative;
			width: 100%;
		}

		ul li {
			list-style: none;
		}

		ul li input {
			display: none;
		}

		ul li label {
			float: left;
			width: 33.3%;
			text-align: center;
			line-height: 34px;
			height: 35px;
			border-right: 0;
			box-sizing: border-box;
			cursor: pointer;
			transition: all .3s;
			background-color: #1abc9c;
			color: #fff;
		}

		ul li input:checked+label {
			color: #000;
			background-color: #F5F6F6;
		}

		ul li:last-child label {
			border-right: 1px solid #1abc9c;
		}

		ul li .content {
			opacity: 0;
			visibility: hidden;
			position: absolute;
			left: 0;
			top: 31px;
			width: 100%;
			height: auto;
			box-sizing: border-box;
			transition: all .3s;
		}

		ul li .content table {
			width: 100%
		}

		ul li .content td {
			border-bottom: 1px solid #DFE0E0;
			height: 60px;
		}

		ul li .content td:nth-child(1) {
			padding-left: 10px;
		}

		ul li .content td:nth-child(1) p:nth-child(2) {
			color: #555555
		}

		ul li:nth-child(1) .content {
			background-color: #F5F6F6;
		}

		ul li:nth-child(2) .content {
			background-color: #F5F6F6;
		}

		ul li:nth-child(3) .content {
			background-color: #F5F6F6;
		}

		ul li:nth-child(4) .content {
			background-color: #F5F6F6;
		}

		ul li input:checked~.content {
			opacity: 1;
			visibility: visible;
		}

		.Add {
			height: 40px;
			width: 96%;
			background-color: #1ABC9C;
			color: white;
			text-align: center;
			font-size: 15px;
			margin-top: 20px;
			outline: none;
		}

		ol,
		ul {
			margin-top: 0;
			margin-bottom: 0;
		}

		.aa {
			width: 45%;
			height: 30px;
			float: left;
			font-size: 18px;
			background-color: #FFFFFF;
		}

		.ab {
			width: 100%;
			color: #797979;
			float: left;
			margin-top: 5px
		}

		.ab span {
			margin-left: 30px;
			font-size: 16px
		}

		[v-cloak] {
			display: none;
		}
	</style>
</head>

<body>
	<ul>
		<li>
			<input id="tab1" onclick="ret(0)" type="radio" name="tab" checked>
			<label for="tab1">虫情监测</label>

			<div class="content" id="jc">
				<div v-for="(j, index) in lnsectdetection"  v-cloak
					style="background-color: rgb(240,239,244);margin-top: 10px;height: 135px">
					<div style="width: 10%;height: 30px;float: left;background-color: #FFFFFF;">
						<img src="../../image/bch.png" style="width:20px;height: auto;margin-top: 5px;margin-left: 10px" />
					</div>
					<div class="aa">
						<span style="margin-top: 6px;margin-left:5px;font-size: 13px">{{j.time}}</span>
					</div>
					<div class="aa" style="text-align: right;" v-on:click="details(j)">
						<span style="margin-right: 10px;color: #00bbd4;margin-top: 5px;font-size: 13px">查看详情 ></span>
					</div>
					<div class="ab">
						<span style="font-size: 13px">监测类型：{{j.type}}</span>
					</div>
					<div class="ab">
						<span style="font-size: 13px">树种类型：{{j.treespeciesname}}</span>
					</div>
					<div class="ab">
						<span style="font-size: 13px">负责人员：{{j.people}}</span>
					</div>
					<div class="ab">
						<span style="font-size: 13px">监测位置：{{j.locationpoints}}</span>
					</div>
				</div>
			</div>
			<!--
				<div class="content">
					<table id="jc">
						<tr v-for="(j,index) in lnsectdetection">
							<td v-text="j.type">1</td>
							<td>
							<p v-text="j.locationpoints">
								123
							</p>
							<p v-text="j.treespeciesname">
								1
							</p></td>
							<td width="100">
							<p v-text="j.people">
								123
							</p>
							<p v-text="j.time">
								123
							</p></td>
							<td width="50"><img src="../../image/update.png" height="55%" @click="details(j)" /></td>
						</tr>
					</table>
				</div>-->
		</li>
		<li>
			<input id="tab2" onclick="ret(1)" type="radio" name="tab">
			<label for="tab2">虫情历史</label>

			<div class="content" id="ls">
				<div v-for="(tor, index) in lnsecthistory"
					style="background-color: rgb(240,239,244);margin-top: 10px;height: 135px">
					<div style="width: 10%;height: 30px;float: left;background-color: #FFFFFF;">
						<img src="../../image/bch.png" style="width:20px;height: auto;margin-top: 5px;margin-left: 10px" />
					</div>
					<div class="aa">
						<span style="margin-top: 3px;margin-left:5px;font-size: 13px">{{tor.greedLandName}}</span>
					</div>
					<div class="aa" style="text-align: right;" v-on:click="cqls(tor)">
						<span style="margin-right: 10px;color: #00bbd4;margin-top: 5px;font-size: 13px">查看详情 ></span>
					</div>
					<div class="ab">
						<span style="font-size: 13px">发现时间：{{tor.startTime}}</span>
					</div>
					<div class="ab">
						<span style="font-size: 13px">解决时间：{{tor.endTime}}</span>
					</div>
					<div class="ab">
						<span style="font-size: 13px">病虫类型：{{tor.types}}</span>
					</div>
					<div class="ab">
						<span style="font-size: 13px">树种类型：{{tor.plant}}</span>
					</div>
				</div>
			</div>


			<!--
				<div class="content">
					<table id="ls" >
						<tr v-for="(tor,index) in lnsecthistory">
							<td v-text="tor.types">1</td>
							<td>
							<p v-text="tor.plant">
								123
							</p>
							<p v-text="tor.greedLandName">
								1
							</p></td>
							<td width="100" >
							<p v-text="tor.startTime">
								123
							</p>
							<p v-text="tor.endTime">
								123
							</p></td>
							<td width="50"><img src="../../image/update.png" height="55%" @click="cqls(tor)" /></td>
						</tr>
					</table>
				</div>-->
		</li>
		<li>
			<input id="tab3" onclick="ret(2)" type="radio" name="tab">
			<label for="tab3">统计分析</label>
			<div class="content">
				<br>
				<br>
				<table style="border:none;" rules=none>
					<tr>
						<td style="width: 80%;margin-left: 10%">
							<div id="container" style="height: 200px"></div>
						</td>
					</tr>
					<tr>
						<td style="width: 80%;margin-left: 10%">
							<div style="height: 50px"></div>
						</td>
					</tr>
					<tr>
						<td style="width: 80%;margin-left: 10%">
							<div id="containers" style="height: 200px"></div>
						</td>
					</tr>
					<tr>
						<td style="width: 80%;margin-left: 10%">
							<div style="height: 50px"></div>
						</td>
					</tr>
					<tr>
						<td style="width: 80%;margin-left: 10%">
							<div id="containerss" style="height: 200px"></div>
						</td>
					</tr>
					<!--<tr>
						<td>
						<br>
						</td>
						</tr>
						<tr>
						<td style="width: 80%"><div id="containersr" style="height: 200px"></div></td>
						</tr>
						<tr>
						<td style="width: 80%"><div id="containersre" style="height: 200px"></div></td>
						</tr>-->
				</table>
			</div>
		</li>
	</ul>
</body>

</html>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/highcharts-3d.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/series-label.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/oldie.js"></script>
<script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script type="text/javascript">
	var id;
	apiready = function () {
		var jsfun = 'tabAdd(0);';
		api.execScript({
			script: jsfun
		});
		var reg = $api.getStorage("userSession");
		var sids = reg.data.sysRole.sysRoleCode;
		var role = sids.role_number;
		if (role != "construction") {
			id = $api.getStorage("selectpor").id;
		} else {
			id = reg.data.areaid;
		}
		//虫情监测
		var apps = new Vue({
			el: '#jc',
			data: {
				lnsectdetection: []
			},
			created: function () {
				$.ajax({
					type: "post",
					//async : false, //同步执行
					url: BaseServiceUrl + "mobile/insect/findAll.json",
					data: {
						id: id
					},
					dataType: "json", //返回数据形式为json
					success: function (result) {
						//alert(JSON.stringify(result));
						if (result.code == 0) {
							for (var i = 0; i < result.obj.length; i++) {
								//alert(result.data[i])
								apps.lnsectdetection.push(result.obj[i]);
							}
						}
					}
				});
			},
			methods: {
				details: function (j) {
					api.openWin({
						name: 'wss',
						url: 'detail_window.html',
						rect: {
							x: 0,
							y: 0,
							w: 'auto',
							h: 'auto'
						},
						pageParam: {
							result: j
						}, //传递参数
						bounces: true,
						delay: 200
					});
				}
			}
		});
		//虫情历史
		var app = new Vue({
			el: '#ls',
			data: {
				lnsecthistory: []
			},
			created: function () {
				$.ajax({
					type: "post",
					//async : false, //同步执行
					url: BaseServiceUrl + "mobile/insectory/getAll.json",
					data: {
						id: id
					},
					dataType: "json", //返回数据形式为json
					success: function (resultss) {
						//alert(JSON.stringify(result));
						if (resultss.code == 0) {
							for (var i = 0; i < resultss.obj.length; i++) {
								//									alert(resultss.obj[i].startTime);
								//									alert("----");
								//									alert(resultss.obj[i].endTime);
								app.lnsecthistory.push(resultss.obj[i]);
							}
						}
					}
				});
			},
			methods: {
				cqls: function (tor) {
					//alert(JSON.stringify(ret))
					api.openWin({
						name: 'detailtory_window',
						url: 'detailtory_window.html',
						rect: {
							x: 0,
							y: 0,
							w: 'auto',
							h: 'auto'
						},
						pageParam: {
							result: tor
						}, //传递参数
						bounces: true,
						delay: 200
					});
				}
			}
		});
		bchdb();
		yjyldb();
		bchtj();
	}

	function bchdb() {
		$.ajax({
			type: "post",
			//async : false, //同步执行
			url: BaseServiceUrl + "mobile/inseanalysis/findall.json",
			data: {},
			dataType: "json", //返回数据形式为json
			success: function (resultss) {
				var dom = document.getElementById("container");
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				option = {
					title: {
						text: '病/虫害对比',
						subtext: '',
						left: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b} : {c} ({d}%)'
					},
					legend: {
						orient: 'vertical',
						left: 'left',
						data: ['病虫', '工商', '情商']
					},
					series: [{
						name: '访问来源',
						type: 'pie',
						radius: '55%',
						center: ['50%', '60%'],
						data: resultss,
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};;
				if (option && typeof option === "object") {
					myChart.setOption(option, true);
				}
			}
		});
	}

	function yjyldb() {
		$.ajax({
			type: "post",
			//async : false, //同步执行
			url: BaseServiceUrl + "mobile/inseanalysis/findalls.json",
			data: {},
			dataType: "json", //返回数据形式为json
			success: function (res) {
				var dom = document.getElementById("containers");
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				option = {
					title: {
						text: '药剂用量比',
						subtext: '',
						left: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b} : {c} ({d}%)'
					},
					legend: {
						orient: 'vertical',
						left: 'left',
						data: ['敌敌畏', '头孢']
					},
					series: [{
						name: '访问来源',
						type: 'pie',
						radius: '55%',
						center: ['50%', '60%'],
						data: res,
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};;
				if (option && typeof option === "object") {
					myChart.setOption(option, true);
				}
			}
		});
	}

	function bchtj() {
		$.ajax({
			type: "post",
			//async : false, //同步执行
			url: BaseServiceUrl + "mobile/inseanalysis/getalls.json",
			data: {
				aid: id
			},
			dataType: "json", //返回数据形式为json
			success: function (rest) {
				var echarts = Highcharts.chart('containerss', {
					chart: {
						type: 'column'
					},
					title: {
						text: '病/虫害统计'
					},
					subtitle: {
						text: ''
					},
					xAxis: {
						categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
						//crosshair: true
					},
					yAxis: {
						min: 0,
						title: {
							text: '次数'
						}
					},
					plotOptions: {
						column: {
							borderWidth: 0
						}
					},
					series: [{
						name: '病害',
						data: rest[0]
					}, {
						name: '虫害',
						data: rest[1]
					}]
				});
			}
		});
	}

	function ret(index) {
		api.sendEvent({
			name: 'bc',
			extra: {
				key1: index
			}
		});
	}
</script>